<template>
	<view class="container">
		<view class="credit-card">
			<view class="credit-title">本次扣除</view>
			<view class="credit-amount">¥ {{form.currentDeduceCredit}}</view>
		</view>

		<view class="info-card">
			<view class="info-row">
				<view class="info-item">
					<text class="info-label">序号</text>
					<text class="info-value">{{form.id}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">车牌号</text>
					<text class="info-value highlight">{{form.plate}}</text>
				</view>
			</view>

			<view class="info-row">
				<view class="info-item">
					<text class="info-label">调拨单号</text>
					<text class="info-value highlight">{{form.sapOrderNo}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">调拨单金额</text>
					<text class="info-value status-rejected" >¥ {{form.amount}}</text>
				</view>
			</view>

			<view class="info-row">
				<view class="info-item">
					<text class="info-label">放行状态</text>
					<text class="info-value status-rejected">{{(form.isRelease === 'X' || form.isRelease === ''  || form.isRelease === null)? '允许放行' : '不允许放行' }}</text>
				</view>
			</view>
			
			<view class="info-row">
				<view class="info-item">
					<text class="info-label">拒绝原因</text>
					<text class="info-value status-rejected">{{form.reason}}</text>
				</view>
			</view>

			<view class="info-row">
				<view class="info-item">
					<text class="info-label">送达方</text>
					<text class="info-value" style ="color: #67c23a;">{{form.nameWe}}</text>
				</view>
			</view>
			
			<view class="info-row">
				<view class="info-item">
					<text class="info-label">售达方</text>
					<text class="info-value" style ="color: #67c23a;">{{form.nameAg}}</text>
				</view>
			</view>

			<view class="info-row">
				<view class="info-item">
					<text class="info-label">业务员工号</text>
					<text class="info-value">{{form.ihrez}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">业务员姓名</text>
					<text class="info-value">{{form.bname}}</text>
				</view>
			</view>

			<view class="info-row">
				<view class="info-item">
					<text class="info-label">订单号</text>
					<text class="info-value">{{form.vgbel}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">车辆登记单</text>
					<text class="info-value">{{form.vbill}}</text>
				</view>
			</view>

			<view class="info-row">
				<view class="info-item">
					<text class="info-label">差额</text>
					<text class="info-value">¥ {{form.amountDiff}}</text>
				</view>
				<view class="info-item">
					<text class="info-label">客户余额</text>
					<text class="info-value">¥ {{form.zumsav}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getVehicleReleaseCreditRecord
	} from '@/api/tms/ecDeliverVehicle'

	export default {
		created() {
			const id = this.$route.query.id;
			getVehicleReleaseCreditRecord(id).then(response => {
				this.form = response.data;
			});
		},
		data() {
			return {
				form: {
					id: null,
					sapOrderNo: null,
					currentDeduceCredit: null,
					creditLimit: null,
					remainingCredit: null,
					createById: null,
					createByName: null,
					createTime: null,
					plate: null,
					release: null,
					reason: null,
					kunwe: null,
					nameWe: null,
					kunag: null,
					nameAg: null,
					ihrez: null,
					bname: null,
					amount: null,
					zumsav: null,
					amountDiff: null
				}
			};
		},
		methods: {},
	};
</script>

<style lang="scss">
	.container {
		display: flex;
		flex-direction: column;
		background-color: #f5f5f7;
		min-height: 100vh;
		padding: 15px;
	}

	.credit-card {
		background: linear-gradient(135deg, #42b7ff, #42b7ff);
		border-radius: 12px;
		padding: 20px;
		margin-bottom: 15px;
		text-align: center;
		box-shadow: 0 4px 12px rgba(64, 158, 255, 0.2);
		color: white;

		.credit-title {
			font-size: 16px;
			margin-bottom: 8px;
			font-weight: 500;
		}

		.credit-amount {
			font-size: 24px;
			font-weight: bold;
		}
	}

	.info-card {
		background-color: #ffffff;
		border-radius: 12px;
		padding: 16px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	.info-row {
		display: flex;
		margin-bottom: 12px;

		&.single {
			flex-direction: column;
			margin-bottom: 10px;
		}
	}

	.info-item {
		flex: 1;
	}

	.info-label {
		display: block;
		font-size: 13px;
		color: #909399;
		margin-bottom: 4px;
	}

	.info-value {
		display: block;
		font-size: 15px;
		color: #606266;
		font-weight: 500;

		&.highlight {
			color: #409EFF;
			font-weight: bold;
		}

		&.status-released {
			color: #67C23A;
		}

		&.status-rejected {
			color: #F56C6C;
		}
	}
</style>